﻿// Our default grid options
var defaultGridOptions = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    enableAddRow: false,
    editable: false,
    editOnDoubleClick: true,
    multiSelect: false,
    forceFitColumns: false,
    autoHeight: false,
    resizable: false,
    autoEdit: false,
    showHeaderRow: true,
    rowHeight: 36,
    headerHeight: 36,
    headerRowHeight: 36

};

var currentDate = new Date();
$().ready(function () {
    $('.button').button();

    var scheduleGrid = setUpScheduleGrid('#scheduleGrid');

    loadSchedule(new Date());

    $('#previousWeek').click(function () {
        var date = new Date();
        date.setFullYear(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
        date.setDate(currentDate.getDate() - 7);
        loadSchedule(date);
    });
    $('#nextWeek').click(function () {
        var date = new Date();
        date.setFullYear(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
        date.setDate(currentDate.getDate() + 7);
        loadSchedule(date);
    });

    // buttons
    $('.buttonRight').mousedown(function () {
        $(this).attr('src', '/Content/images/buttonRightClick.png');
    }).mouseup(function () {
        $(this).attr('src', '/Content/images/buttonRight.png');
    });
    $('.buttonLeft').mousedown(function () {
        $(this).attr('src', '/Content/images/buttonLeftClick.png');
    }).mouseup(function () {
        $(this).attr('src', '../Content/images/buttonLeft.png');
    });
    var startDate;
    var endDate;

    var selectCurrentWeek = function () {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    };

    $('#scheduleDatePicker').datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function (dateText, inst) {
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
            //$('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
            //$('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));

            selectCurrentWeek();
            $('#scheduleDate').text(dateText);
            loadSchedule($('#scheduleDatePicker').datepicker('getDate'));
        },
        beforeShowDay: function (date) {
            var cssClass = '';
            if (date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function (year, month, inst) {
            selectCurrentWeek();
        },
        dateFormat: "M d, yyyy"
    });

    $('.ui-datepicker-calendar tr').live('mousemove', function () { $(this).find('td a').addClass('ui-state-hover'); });
    $('.ui-datepicker-calendar tr').live('mouseleave', function () { $(this).find('td a').removeClass('ui-state-hover'); });

    $('#scheduleDate').click(function () {
        $('#scheduleDatePicker').datepicker('show');
    });
    function loadSchedule(date) {
        if (date !== undefined) {
            block({ element: $('#scheduleGrid'), text: 'Loading' });
            // Retrieve schedule from server
            $.get('/schedule/GetSchedule', { date: $.format.date(date, "yyyy-MM-dd") },
                function (response) {
                    if (response.Result) {
                        // Load schedule data into grid
                        // Display schedule date
                        scheduleGrid.dataView.setItems(response.Data.Schedules);
                        scheduleGrid.invalidate();
                        currentDate = new Date(response.Data.Date.replace(/-/, "/"));
                        $('#scheduleDate').text($.format.date(currentDate, "MMMM d, yyyy"));
                    } else {
                        alert('Unable to retrieve schedule: ' + response.Data);
                    }
                }).complete(function () {
                    unblock({ element: $('#scheduleGrid') });
                });
        }
    }
});

// Sets up the sample grid
function setUpScheduleGrid($gridSelector) {
    // First, define the grid's columns
    var columns = [
        { id: "Employee", name: "Employee", field: "Employee", width: 250, sortable: true },
        { id: "Monday", name: "Monday", field: "Monday", width: 100, sortable: true, formatter: hoursFormatter, cssClass: "hours" },
        { id: "Tuesday", name: "Tuesday", field: "Tuesday", width: 100, sortable: true, formatter: hoursFormatter, cssClass: "hours" },
        { id: "Wednesday", name: "Wednesday", field: "Wednesday", width: 100, sortable: true, formatter: hoursFormatter, cssClass: "hours" },
        { id: "Thursday", name: "Thursday", field: "Thursday", width: 100, sortable: true, formatter: hoursFormatter, cssClass: "hours" },
        { id: "Friday", name: "Friday", field: "Friday", width: 100, sortable: true, formatter: hoursFormatter, cssClass: "hours" },
        { id: "Saturday", name: "Saturday", field: "Saturday", width: 100, sortable: true, formatter: hoursFormatter, cssClass: "hours" },
        { id: "Sunday", name: "Sunday", field: "Sunday", width: 100, sortable: true, formatter: hoursFormatter, cssClass: "hours" }
    ];
    function hoursFormatter(row, cell, value) {
        return "<div><p>" + (value ? value : "N/A") + "</p></div>";
    }
    // Set some additional options
    var options = $.extend(true, {}, defaultGridOptions);
    options.hasHeaderFilters = true;

    // Create the grid
    var grid = new Slick.Grid($gridSelector, [], columns, options);
    grid.registerPlugin(new Slick.ExtendedGrid($gridSelector, columns, options));

    grid.updateHeaderRow();
    grid.onCellChange.subscribe(function (e, args) {
        grid.dataView.updateItem(args.item.Id, args.item);
    });

    //    // Return the grid object so we can store it in a variable
    return grid;
}
